<template>
    <Tabs type="card" :animated="false" v-model="currentTab" @on-click="handleTabClick">
        <TabPane label="总部账户设置">
            <div class="account-info-wrapper">
                <Row :gutter="15">
                    <Col span="8" v-if="isClient">
                        <!-- <Card class="bg-white" v-if="rechargeInfo">  要改回来--> 
                        <Card class="bg-white">
                            <p slot="title" class="sub-title">
                                <span class="account-type">银联分账</span>
                            </p>
                            <div slot="extra">
                                <!-- <Button type="primary" size="small" v-show="!rechargeInfo.audit" @click="handleEnableRecharge">申请开通</Button> -->
                                <Button type="primary" size="small" v-show="buttonName !==''" @click="handleEnableRecharge" v-if="isClient">{{buttonName}}</Button>
                            </div>
                            <div class="ai-container" v-if="rechargeInfo">
                                <p v-if="rechargeInfo.audit && rechargeInfo.audit.state == 4">
                                    失败原因: {{
                                        rechargeInfo.audit.audit_records ? rechargeInfo.audit.audit_records[0].remark : ''
                                    }}
                                </p>
                                
                                <p v-if="rechargeInfo.audit && rechargeInfo.audit.state == 2" class="margin-bottom-10">
                                    尊敬的客户，银联目前接口不稳定，审核时间长。建议申请支付宝分账，24小时审核出结果
                                </p>

                                <p class="margin-bottom-20">
                                    当前状态: {{
                                        !rechargeInfo.audit ? '未开通' : ['待审核','审核中' ,'已开通','审核失败'][rechargeInfo.audit.state - 1]
                                    }}
                                </p>

                                <p v-if="rechargeInfo.charge_online && rechargeInfo.poundage_type" class="flex flex-space-between">
                                <!-- <p v-if="rechargeInfo.charge_online && rechargeInfo.audit.state !== 1"> -->
                                    <span>手续费承担方：{{rechargeInfo.poundage_type | poundageType}}</span>
                                    <Poptip placement="top" width="300" title="选择手续费承担方" v-model="rechargePoundageType.visible">
                                        <Button type="ghost" size="small">设置</Button>
                                        <div slot="content" class="ai-poundage__type">
                                            <RadioGroup v-model="rechargePoundageType.poundage_type">
                                                <Radio :label="1">公寓运营方承担</Radio>
                                                <Radio :label="2">租客承担</Radio>
                                            </RadioGroup>
                                            <div class="margin-top-10">
                                                注: 更改后，支付宝分账将同步更改
                                            </div>
                                            <div class="margin-top-10 text-right">
                                                <i-button size="small" type="text" @click="rechargePoundageType.visible = false">取消</i-button>
                                                <i-button size="small" type="primary" @click="handleChangePoundageType">确定</i-button>
                                            </div>
        
                                        </div>
                                    </Poptip>
                                </p>
                            </div>
                        </Card>
                    </Col>

                    <!-- 电费代缴卡片 -->
                    <Col span="8" v-if="isNotMigrateClient">
                        <Card class="bg-white" v-if="aliInfo">
                            <p slot="title" class="sub-title">
                                <span class="account-type">电费代缴</span>
                            </p>
                            <div slot="extra">
                                <Button
                                    type="primary"
                                    size="small"
                                    v-if="!aliInfo.audit && isClient"
                                    @click="operateElePay(elementSetting, true)">{{elementSetting ? '修改' : '申请开通'}}</Button>
                            </div>
                            <div class="ai-container">
                                <div class="margin-bottom-10">
                                    <p>
                                        当前状态：{{!aliInfo.audit ? '未设置' : aliInfo.audit.state === 1 ? '审核中' : '已开通'}}
                                    </p>
                                </div>
                                <div v-if="aliInfoDetail">
                                    <p class="margin-bottom-10">帐号类型：{{aliInfoDetail.belongs_to === 'client' ? '商户' : '分店'}}</p>
                                    <p class="margin-bottom-10">商户名称：{{aliInfoDetail.name}}</p>
                                    <p class="margin-bottom-10">支付宝账号：{{aliInfoDetail.agency_pay_info.account}}</p>
                                    <p class="margin-bottom-10">appid：{{aliInfoDetail.agency_pay_info.appid}}</p>
                                </div>
                            </div>
                        </Card>
                    </Col>

                    <!-- 支付宝分账 -->
                    <Col span="8" v-if="isClient">
                        <Card class="bg-white">
                            <p slot="title" class="sub-title">
                                <span class="account-type">支付宝充值电费</span>
                            </p>
                            <div slot="extra">
                                <!-- 审核中情况下不显示修改弹窗 -->
                                <Button type="primary" size="small" @click="alipayClick" v-if="alipayEnableStatus !== 1">{{alipay_button_name}}</Button>
                            </div>
                            <div class="ai-container" style="padding-top: 5px">
                                <div class="margin-bottom-10">
                                    <p>
                                        当前状态:{{!alipayEnableStatus ? '未开通' : ['审核中(5 - 24 小时内有审核结果)', '审核成功', '审核失败'][alipayEnableStatus - 1]}} 
                                        <span style="color:#f00" v-if="alipayEnableStatus === 3">({{accountInfo.error_tip}})</span>
                                    </p>

                                </div>
                                <div v-if="alipayEnableStatus">
                                    <p class="margin-bottom-10">商户名称:{{accountInfo.merchant_name}}</p>
                                    <p class="margin-bottom-10">商户类型:{{accountInfo.account_type}}</p>
                                    <p class="margin-bottom-10">银行卡号:{{accountInfo.bank_card_no}}</p>
                                    <p class="margin-bottom-10">账户户名:{{accountInfo.bank_cert_name}}</p>
                                    <p class="flex flex-space-between" v-if="alipayEnableStatus == 2">
                                        <span>手续费承担方：{{rechargeInfo.poundage_type | poundageType}}</span>
                                        <Poptip placement="top" width="300" title="选择手续费承担方" v-model="aliPoundageVisible">
                                            <Button type="ghost" size="small">设置</Button>
                                            <div slot="content" class="ai-poundage__type">
                                                <RadioGroup v-model="rechargePoundageType.poundage_type">
                                                    <Radio :label="1">公寓运营方承担</Radio>
                                                    <Radio :label="2">租客承担</Radio>
                                                </RadioGroup>
                                                <div class="margin-top-10">
                                                    注: 更改后，银联分账将同步更改
                                                </div>
                                                <div class="margin-top-10 text-right">
                                                    <i-button size="small" type="text" @click="aliPoundageVisible = false">取消</i-button>
                                                    <i-button size="small" type="primary" @click="handleChangePoundageType">确定</i-button>
                                                </div>
                                            </div>
                                        </Poptip>
                                    </p>
                                </div>
                            </div>
                        </Card>
                    </Col>
                </Row>

                <!-- 申请支付宝分账前的信息确认弹窗 -->
                <tooltip-modal 
                    v-model="showTipModal" 
                    @finish="() => this.alipayRechargeModal = true"
                />

                <Modal
                    v-model="modal1"
                    :width="640"
                    title="编辑账户信息">
                    <Form :model="formItem"
                        :label-width="100"
                        ref="addBankForm"
                        :rules="ruleValidate2"
                        :show-message="false">

                        <FormItem class="mb-min" label="银行户名" prop="customer_name">
                            <Input v-model="formItem.customer_name" placeholder="请输入银行户名"></Input>
                        </FormItem>

                        <FormItem class="mb-min" label="身份证号" prop="id_card">
                            <Input v-model="formItem.id_card" placeholder="请输入身份证号"></Input>
                        </FormItem>

                        <FormItem class="mb-min" label="银行账号" prop="card_no">
                            <Input v-model="formItem.card_no" placeholder="请输入银行账号"></Input>
                        </FormItem>

                        <FormItem class="mb-min" label="手机号" prop="phone_no">
                            <Input v-model="formItem.phone_no" placeholder="请输入银行预留手机号"></Input>
                        </FormItem>

                        <FormItem class="mb-min" label="用户类型" prop="is_company">
                            <Select placeholder="用户类型" v-model="formItem.is_company">
                                <Option :value="1">企业用户</Option>
                                <Option :value="0">个人用户</Option>
                            </Select>
                        </FormItem>

                        <FormItem class="mb-min" label="开户银行">
                            <Row type="flex" :gutter="8">
                                <Col span="8">
                                    <Select placeholder="开户行" filterable v-model="formItem.bank_name">
                                        <Option v-for="item in banks" :value="item" :key="item">{{ item }}</Option>
                                    </Select>
                                </Col>
                                <Col span="8">
                                    <Select placeholder="开户行所在省" filterable @on-change="getPayCountry" v-model="formItem.bank_province">
                                        <Option v-for="item in provinces" :value="item.name" :key="item.id">{{ item.name }}</Option>
                                    </Select>
                                </Col>
                                <Col span="8">
                                    <Select placeholder="开户行所在县" v-model="formItem.bank_city">
                                        <Option v-for="item in countrys" :value="item.name" :key="item.id">{{ item.name }}</Option>
                                    </Select>
                                </Col>
                            </Row>
                        </FormItem>

                        <FormItem class="mb-min" label="商户手机号">
                            <div >{{clientPhone}}</div>
                        </FormItem>

                        <FormItem class="mb-min" label="图形验证码" prop="captcha_code" v-if="modal1">
                            <captcha :reset="reset" @on-success="success"></captcha>
                        </FormItem>

                        <FormItem class="mb-min" label="短信验证码" prop="msg_code">
                            <Row>
                                <Col span="18">
                                    <Input type="text" v-model="formItem.msg_code" placeholder="输入短信验证码"></Input>
                                </Col>
                                <Col span="6" style="text-align:right">
                                    <Button type="ghost" @click="sendSMS" v-if="!isWaitingForSMS">获取验证码</Button>
                                    <Button type="ghost" disabled v-if="isWaitingForSMS">{{second}} s 后重试</Button>
                                </Col>
                            </Row>
                        </FormItem>
                    </Form>

                    <div slot="footer">
                        <Button type="text" size="large" @click="cancel('addBankForm')">取消</Button>
                        <Button type="primary" size="large" @click="saveBankCard('addBankForm')">保存</Button>
                    </div>
                </Modal>
            </div>
        </TabPane>
        <TabPane v-if="isNotMigrateClient" label="网商银行账户" name="my-bank-account">
            <div class="account-info-wrapper" v-if="currentTab === 'my-bank-account'">
                <Card v-pmis="33">
                    <p slot="title" class="sub-title">
                        <span class="account-type">网商银行账户</span>
                    </p>
                    <Table stripe :columns="columns" :data="datas"></Table>
                </Card>

            </div>
        </TabPane>
        <TabPane v-if="isNotMigrateClient" label="财务信息" name="finance-info">
            <finace-info :datas="financeInfo" v-if="currentTab === 'finance-info'"></finace-info>
        </TabPane>
        <TabPane v-if="isNotMigrateClient" label="结算信息" name="settlement-info">
            <settlement-info :datas="financeInfo" v-if="currentTab === 'settlement-info'"></settlement-info>
        </TabPane>
        <TabPane v-if="isNotMigrateClient" label="设备概览" name="devices-info">
            <devices-info v-if="currentTab === 'devices-info'"></devices-info>
        </TabPane>
        <TabPane v-if="isNotMigrateClient" label="商城订单" name="orders">
            <orders @openOrderDetail="openOrderDetail" v-if="currentTab === 'orders'"></orders>
        </TabPane>
        <TabPane v-if="isNotMigrateClient" label="拆回设备" name="teardown">
            <teardown v-if="currentTab === 'teardown'"></teardown>
        </TabPane>
        <TabPane :label="'订单详情-' + currentOrder" v-if="currentOrder && isNotMigrateClient"  name="order-detail">
            <order-detail :order-id="currentOrder"></order-detail>
        </TabPane>

        <!-- 支付宝代缴介绍弹窗 -->
        <!-- <eleAliPay-introduction
            :client-phone="clientPhone"
            :show.sync="isOpenAliPay"
            @success="aliPaySuccess"></eleAliPay-introduction> -->

        <alipay-recharge :show.sync="alipayRechargeModal" :dataParams="alipayParams" :status="alipayEnableStatus" @refresh="alipay_refresh"></alipay-recharge>

        <enable-eleAliPay :client-phone="clientPhone" :show.sync="openAliPay" :branch-id="branchId" @refresh="fetchEnableAliStatus"></enable-eleAliPay>

        <enable-recharge :show.sync="enableRecharge.formVisible" :dataParams="params" @confirm="goToMsm" :accountName="accountName" :clientPhone="clientPhone"></enable-recharge>

        <recharge-introduction
            :client-phone="clientPhone"
            :show.sync="enableRecharge.introductionVisible"
            :paramsData="paramsData"
            @confirm="confirm"></recharge-introduction>
    </Tabs>
</template>

<script>
import util from '@/libs/util'
import captcha from '../captcha'
import validate from '@/libs/validate'
import { http, api } from '@/libs/http'
import finaceInfo from './components/finance-info'
import teardown from './components/teardown'
import settlementInfo from './components/settlement-info'
import devicesInfo from './components/devices-info'
import rechargeIntroduction from './components/recharge-introduction'
import alipayRecharge from './components/alipay-recharge'
import enableRecharge from './components/enable-recharge'
import orders from './components/orders.vue'
import orderDetail from './components/order-detail.vue'
import tooltipModal from './components/tooltip-modal.vue'
import enableEleAliPay from './components/enable-eleAliPay.vue'

export default {
  components: {
    orders,
    captcha,
    finaceInfo,
    orderDetail,
    devicesInfo,
    settlementInfo,
    enableRecharge,
    rechargeIntroduction,
    tooltipModal,
    enableEleAliPay,
    alipayRecharge,
    teardown
  },
  data () {
    return {
      showTipModal: false, // 是否展示提示弹窗
      aliPoundageVisible: false, // 选择ali手续费承担分弹窗
      alipayParams: {},
      accountInfo: {}, // 账户信息
      alipayEnableStatus: null, // alipay 分账平台状态 null 1 2 3  => 未申请 审核中 审核成功 审核失败
      alipayRechargeModal: false, // 支付宝分账弹窗是否开启
      accountName: '', // 账户名
      paramsData: {},
      params: {}, // 获取params中的参数
      currentTab: 0,
      currentOrder: '',
      financeInfo: null, // 财务信息和结算信息一起获取
      branchId: '',
      isOpenAliPay: false, // 是否打开aliPay
      openAliPay: false, // 是否打开aliPay配置弹窗
      elementSetting: false, // 是否设置电费代缴，默认为未设置
      rechargeInfo: {},
      aliInfo: null,
      aliInfoDetail: null,
      rechargePoundageType: {
        visible: false,
        poundage_type: 0
      },
      autoTransfer: {
        visible: false,
        poundage_type: 0
      },
      enableRecharge: {
        introductionVisible: false, // 介绍modal
        formVisible: false // 申请流程表单modal
      },
      modal1: false,
      reset: false,
      hasBankCard: false,
      isLoadig: false,
      clientPhone: '',
      isWaitingForSMS: false,
      second: 60,
      timer: '',
      columns: [
        // 网商银行账户表头
        {
          title: '名称',
          align: 'center',
          key: 'client_name'
        },
        {
          title: '账号',
          align: 'center',
          key: 'client_id'
        },
        {
          title: '网商账户名称',
          align: 'center',
          key: 'corporation'
        },
        {
          title: '网商账号',
          align: 'center',
          key: 'mybank_account'
        },
        {
          title: '纳税人识别号',
          align: 'center',
          key: 'taxpayer_id'
        },
        {
          title: '银行账号',
          align: 'center',
          key: 'bank_account'
        },
        {
          title: '创建时间',
          align: 'center',
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              new Date(obj.row.created_at).Format('yyyy-MM-dd HH:mm')
            )
          }
        }
      ],

      datas: [
        // 日志具体数据
      ],
      formItem: {
        phone_no: '',
        customer_name: '',
        bank_name: '',
        bank_province: '',
        bank_city: '',
        card_no: '',
        id_card: '',
        msg_code: '',
        is_company: 1,
        captcha_code: '',
        branch_id: 0
      },

      provinces: [],
      countrys: [],
      banks: [],

      isSettingBtnVisible: false,
      isSettingLoading: false,
      clientSetting: {
        poundage_type: 0,
        transfer_status: 0
      },
      bankData: {
        name: '',
        bank: '',
        card: ''
      },
      ruleValidate2: {
        customer_name: [
          {
            required: true,
            message: '请输入正确的银行开户名',
            trigger: 'blur',
            validator: validate.validChinese
          }
        ],
        card_no: [
          {
            required: true,
            message: '请输入正确的银行卡号',
            trigger: 'blur'
          },
          { validator: validate.validBankCard }
        ],
        id_card: [
          {
            required: true,
            message: '请输入正确的身份证号',
            trigger: 'blur'
          },
          { validator: validate.validIDCard }
        ],
        is_company: [
          {
            required: true
          }
        ],
        phone_no: [
          {
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          },
          { validator: validate.validPhone }
        ],
        msg_code: [
          {
            required: true,
            message: '请输入短信验证码',
            trigger: 'blur'
          }
        ],
        captcha_code: [
          {
            required: true,
            message: '请进行人机验证',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.fetchEnableAlipayStatus()
    this.getClientPhone()
    this.getBankCard()
    // this.getPayBank()
    // this.getPayClientSetting()
    this.getFinanceInfo()
    this.getMyBankCard()
    // this.getPayClientSetting()
    this.fetchEnableAliStatus()
    this.fetchEnableRechargeStatus()
  },
  computed: {
    // alipayEnableStatus 1,2,3 审核中，审核成功， 审核失败
    alipay_button_name () {
      if (!this.alipayEnableStatus) { // 未审核情况下
        return '申请开通'
      } else if (this.alipayEnableStatus === 2) { // 审核成功之后状态
        return '修改'
      } else { // 审核失败状态
        return '重新申请'
      }
    },
    isClient () {
      return this.$store.state.user.roleId === 100
    },
    isNotMigrateClient () { // 不是2.0分账升级用户
      return !this.$store.state.user.isMigrateClient
    },
    buttonName () {
      if (!this.rechargeInfo.audit) {
        return ''
      } else {
        if (this.rechargeInfo.audit.state > 2) {
          if (this.rechargeInfo.audit.state === 4 && !this.rechargeInfo.charge_online) {
            return '申请开通'
          } else {
            // return '修改资料' 暂时屏蔽
            return ''
          }
        } else {
          return ''
        }
      }
    }
  },

  methods: {
    /**
        * 申请成功之后刷新支付宝分账状态
        */
    alipay_refresh () {
      this.fetchEnableAlipayStatus()
    },

    alipayClick () {
      // if (this.alipay_button_name === '申请开通') {

      // } else {

      // }

      // if (!this.alipayEnableStatus || this.alipayEnableStatus == 3 ) {
      // 如果未申请郭支付宝分账弹窗相关弹窗
      this.showTipModal = true
      //     return;
      // }
      // this.alipayRechargeModal = true;
    },

    /**
        * 判断支付宝进件状态
        */
    async fetchEnableAlipayStatus () {
      const res = await http.req(api.alipay_register_query, null, null, true)

      if (res) {
        const { operation_stage } = res

        if (operation_stage === null) {
          this.alipayEnableStatus = operation_stage
        } else {
          // this.alipayEnableStatus = operation_stage + 1;

          this.alipayEnableStatus = operation_stage + 1

          const { data, merchant_type } = res

          const { merchant_name, bank_card_no, bank_cert_name } = data

          this.accountInfo = {
            merchant_name,
            bank_card_no,
            bank_cert_name,
            account_type: ['自然人-对私账户', '个体工商户-对私账户', '企业工商户-对公账户'][Number(merchant_type) - 1]
          }

          if (this.alipayEnableStatus === 3) { // 如果审核失败的话
            this.accountInfo.error_tip = res.operation_result.FailReason
          }

          this.alipayParams = data
        }
      }
    },

    confirm () {
      // this.enableRecharge.formVisible = true
      this.$Modal.success({
        title: '审核中',
        content:
                    '<p>已成功提交，十个工作日内，商户手机号将收到银联指定收单机构-中投科信的短信。请根据短信提示，完成线上收单流程。如有疑问，请咨询对接商务或客服。</p>'
      })
      this.fetchEnableRechargeStatus()
    },

    goToMsm (data) {
      this.paramsData = data
      this.enableRecharge.introductionVisible = true
    },

    async getFinanceInfo () {
      this.financeInfo = await http.req(api.client_finance_info, null, null)
    },
    /**
         * 开通电费代缴或者修改相应信息
         * @param {Boolean} isOpenElePay false=> 开通 true=> 修改
         */
    operateElePay (isOpenElePay = false, noBranchId) {
      /** 商户超级管理员和财务才可以开通 */
      if (!this.$store.state.user.roleId) {
        setTimeout(() => {
          this.operateElePay()
        }, 400)
        return
      }
      if (this.isClient) {
        if (noBranchId) this.branchId = ''
        this.openAliPay = true
      } else {
        this.$Notice.warning({
          duration: 10,
          title: '提示',
          desc: '当前用户无权申请开通电费代缴功能, 请联系贵公司商户或财务'
        })
      }
    },

    /**
         * 开通电费代缴功能
         */
    openElePay () {
      this.isOpenAliPay = true
    },

    aliPaySuccess () {
      this.openAliPay = true
      // console.log('Successful!')
    },

    handleEnableRecharge () {
      if (this.buttonName === '修改资料') {
        this.params = {}
        this.getParams()
      } else {
        this.enableRecharge.formVisible = true
      }
    },
    async getParams () {
      try {
        const res = await http.req(api.audit_history, null, { audit_type: 1 })

        if (res) {
          this.params = res
          this.enableRecharge.formVisible = true
        }
      } catch (err) {
        console.log(err)
      }
    },
    async handleChangePoundageType () {
      const loading = this.$Message.loading('提交中...')
      try {
        this.aliPoundageVisible = false
        this.rechargePoundageType.visible = false
        const { poundage_type } = this.rechargePoundageType
        const res = await http.req(api.client_poundage_type, null, { poundage_type })
        if (res) {
          loading()
          this.$Message.success('设置成功')
          this.fetchEnableRechargeStatus()
        }
      } catch (err) {
        console.log(err)
      } finally {
        if (typeof loading === 'function') {
          loading()
        }
      }
    },
    handleChangeTransfer () {
      this.autoTransfer.visible = false
      this.setClientSetting()
    },
    resetForm (name) {
      this.$refs[name].resetFields()
    },
    async fetchEnableRechargeStatus () {
      try {
        const res = await http.req(api.audit_info, null, { audit_type: 1 })
        if (res) {
          const { name } = res
          this.accountName = name
          this.rechargeInfo = res
          this.rechargePoundageType.poundage_type = res.poundage_type
          this.autoTransfer.transfer_status = res.transfer_status
        }
      } catch (err) {
        console.log(err)
      }
    },
    async fetchEnableAliStatus () {
      try {
        const res = await http.req(api.audit_info, null, { audit_type: 2 })
        this.aliInfo = res
        if (res.audit && res.audit.state === 2) {
          this.aliInfoDetail = await http.req(api.agency_pay_info)
        }
      } catch (err) {
        console.log(err)
      }
    },
    saveBankCard (name) {
      // 保存账户
      if (this.isLoadig) {
        return
      }
      this.$refs[name].validate(valid => {
        util.log(this.formItem)
        if (valid) {
          let { bank_name, bank_province, bank_city } = this.formItem
          if (!bank_name) {
            this.$Message.info('请选择开户银行')
            return
          }
          if (!bank_province) {
            this.$Message.info('请选择开户银行所在省')
            return
          }
          if (!bank_city) {
            this.$Message.info('请选择开户银行所在县')
            return
          }
          this.formItem.phone_no = +this.formItem.phone_no
          let params = this.formItem
          this.isLoadig = true
          http.request(this, api.pay_accounts_create, null, params, res => {
            if (res) {
              this.isLoadig = false
              this.modal1 = false
              this.$Message.success('增加银行卡成功!')
              this.getBankCard()
            } else {
              this.isLoadig = false
            }
          })
        }
      })
    },
    getBankCard () {
      // 获取账户
      http.request(this, api.pay_accounts_info, null, null, res => {
        if (res && res.bank_account) {
          this.hasBankCard = true
          let accountInfo = res.bank_account
          this.formItem = Object.assign(accountInfo, {})
          this.formItem.branch_id = 0
          this.formItem.phone_no = String(this.formItem.phone_no)

          this.bankData.name = accountInfo.customer_name
          this.bankData.card = accountInfo.card_no
          this.bankData.bank = accountInfo.bank_name

          // this.getPayCountry(accountInfo.bank_province, accountInfo.bank_city)
        } else {
          this.hasBankCard = false
        }
      })
    },
    delBankCard () {
      // 删除账户
      http.request(this, api.pay_accounts_del, null, null, res => {
        if (res) {
          this.$Message.info('删除成功')
          this.getBankCard()
        }
      })
    },
    getMyBankCard () {
      // 获取网商账户
      http.request(this, api.mybank_accounts, null, null, res => {
        if (res) {
          this.datas = res.rows
        }
      })
    },
    getPayCountry (province, bank_city) {
      http.request(this, api.pay_country, null, { province }, res => {
        if (res) {
          this.formItem.bank_city = ''
          this.countrys = []
          this.countrys = res

          if (bank_city) {
            this.formItem.bank_city = bank_city
          }
        }
      })
    },
    setClientSetting () {
      if (!this.hasBankCard) {
        this.$Message.info('请先添加公司银行卡')
      } else {
        let params = {
          transfer_status: this.autoTransfer.transfer_status,
          poundage_type: this.rechargeInfo.poundage_type
        }
        // 获取网商账户
        const loading = this.$Message.loading('提交中...')
        this.isSettingLoading = true
        http.request(this, api.pay_client_setting_set, null, params, res => {
          loading()
          if (res) {
            this.$Message.success('修改成功')
            this.isSettingBtnVisible = false
            this.fetchEnableRechargeStatus()
          }
          this.isSettingLoading = false
        })
      }
    },
    showSettingBtn () {
      this.isSettingBtnVisible = true
    },
    cancel (name) {
      if (!this.hasBankCard) {
        this.resetForm(name)
      }
      this.modal1 = false
    },
    getClientPhone () {
      http.request(this, api.client_phone_info, null, null, res => {
        if (res) {
          this.clientPhone = String(res.phone).replace(/(...)....(....)/, '$1****$2')
          if (this.$route.query.branchId) {
            this.branchId = +this.$route.query.branchId
            this.operateElePay()
          }
        }
      })
    },
    sendSMS () {
      if (!this.formItem.captcha_code) {
        this.$Message.error('请进行人机识别认证')
      } else {
        this.isWaitingForSMS = true
        this.timer = setInterval(() => {
          if (this.second === 0) {
            clearInterval(this.timer)
            this.isWaitingForSMS = false
            this.second = 60
          } else {
            this.second -= 1
          }
        }, 1000)
        let params = {
          captcha_code: this.formItem.captcha_code
        }
        http.request(this, api.sms, null, params, res => {
          if (res) {
            this.$Message.success('短信发送成功')
          }
        })
      }
    },
    warning () {
      this.$Modal.confirm({
        title: '删除收款账户',
        content: '即将删除收款账户',
        okText: '确定删除',
        cancelText: '取消',
        onOk: () => {
          this.delBankCard()
        },
        onCancel: () => {
          // 取消删除
        }
      })
    },
    success (r) {
      this.formItem.captcha_code = r
    },
    openOrderDetail (id) {
      this.currentTab = 'order-detail'
      this.currentOrder = id
    },
    handleTabClick (name) {
      if (name !== 'order-detail') this.currentOrder = ''
      if (name === 'my-bank-account') this.getMyBankCard()
    }
  }
}
</script>

<style lang="less">
#box::-webkit-scrollbar {
    display: none;
}
#box {
    p {
        margin: 10px 0!important;
    }
    li {
        margin: 10px 0!important;
    }
}
.ai-container {
    padding: 10px 30px 0;
}
.ai-poundage__type {
    padding: 10px 15px;
}
.account-info-wrapper {
    .account-title {
        height: auto;
        .withdraw-btn {
            float: right;
            margin-right: 20px;
            margin-top: 10px;
        }
    }
    .sub-title {
        height: auto;
        display: flex;
        align-items: center;
        .account-type {
            //border-left: 3px solid #000;
            font-size: 18px;
            margin-right: 20px;
        }
    }
}
.bg-white,
.bg-white:hover {
    height: 243px;
    background: #fff !important;
    border: 1px solid #e9eaec !important;
    // box-shadow: 0 4px 8px 4px #d0d0d0;
    .bank-info {
        padding: 10px 0 10px 30px;
    }
}
.mb-min {
    margin-bottom: 6px !important;
}
.cfg-sub-title {
    margin-left: 18px;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
}
</style>